<!--
  * 时间：2024/11/19
  * 作者：刘岩
  * 描述：客流量
-->
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="客流统计组" porp="regionItems">
        <el-select
          multiple
          collapse-tags
          placeholder="请选择客流统计组"
          v-model="queryParams.ids"
        >
          <el-option
            v-for="item in countGroupGroupsPage"
            :value="item.groupId"
            :label="item.groupName"
            :key="item.groupId"
          ></el-option>
        </el-select>
      </el-form-item>
      <br>
      <span class="btn" @click="typeToggle('daily')" :class="{'btn-active': queryParams.granularity === 'daily'}">日</span>
      <span class="btn" @click="typeToggle('monthly')" :class="{'btn-active': queryParams.granularity === 'monthly'}">月</span>
      <span class="btn last-btn" @click="typeToggle('yearly')" :class="{'btn-active': queryParams.granularity === 'yearly'}">年</span>
      <!--日选项-->
      <template v-if="queryParams.granularity === 'daily'">
        <el-form-item>
          <el-date-picker
            v-model="queryParams.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :clearable="false"
          >
          </el-date-picker>
        </el-form-item>
      </template>
      <template v-if="queryParams.granularity === 'monthly'">
        <el-form-item>
          <el-date-picker
            v-model="queryParams.date"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
            :clearable="false"
          >
          </el-date-picker>
        </el-form-item>
      </template>
      <template v-if="queryParams.granularity === 'yearly'">
        <el-form-item>
          <year-range
            :yearRange="queryParams.date"
            :key="`${queryParams.date[0]}_${queryParams.date[1]}`"
            @yearChanged="handleYearChanged"
          >
          </year-range>
        </el-form-item>
      </template>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="header">
      <div class="left">
<!--        <span>保存为图片</span>-->
<!--        <el-dropdown @command="handleCommand">-->
<!--          <span class="el-dropdown-link">-->
<!--            导出数据<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
<!--          </span>-->
<!--          <el-dropdown-menu slot="dropdown">-->
<!--            <el-dropdown-item command="a">已选统计组数据</el-dropdown-item>-->
<!--            <el-dropdown-item command="b">全部统计组数据</el-dropdown-item>-->
<!--          </el-dropdown-menu>-->
<!--        </el-dropdown>-->
      </div>
      <div class="right">
        <el-checkbox-group v-model="checkList" @change="handleCheckedCitiesChange">
          <el-checkbox label="进客量"></el-checkbox>
          <el-checkbox label="出客量"></el-checkbox>
          <el-checkbox label="保有量" :disabled="queryParams.granularity !== 'daily'"></el-checkbox>
        </el-checkbox-group>
        <img class="toggle-img" src="@/assets/flow/bar.png" @click="echartsTypeToggle('bar')" alt="">
        <img class="toggle-img" src="@/assets/flow/line.png" @click="echartsTypeToggle('line')" alt="">
      </div>
    </div>
    <div :class="{'container': checkList.length === 1, 'container2': checkList.length === 2, 'container3': checkList.length === 3}">
      <!--进客量-->
      <div class="box" v-if="isShow('进客量')">
        <into-the-num :echarts-type.sync="echartsType" :xData="echartsX" :yData="echartsY1"></into-the-num>
      </div>
      <!--出客量-->
      <div class="box" v-if="isShow('出客量')">
        <out-the-num :echarts-type.sync="echartsType" :xData="echartsX" :yData="echartsY2"></out-the-num>
      </div>
      <!--保有量-->
      <div class="box" :class="{ 'box3': checkList.length === 3}" v-if="isShow('保有量')">
        <retain-num :echarts-type.sync="echartsType" :xData="echartsX" :yData="echartsY3"></retain-num>
      </div>
    </div>
  </div>
</template>

<script>
import IntoTheNum from '@/views/passengerFlow/flow/components/IntoTheNum'
import OutTheNum from '@/views/passengerFlow/flow/components/outTheNum'
import RetainNum from '@/views/passengerFlow/flow/components/retainNum'
import YearRange from '@/views/passengerFlow/components/yearRange'
import { countGroupGroupsPage, passengerFlowGroups } from '@/api/flow'

export default {
  name: "Flow",
  components: {
    IntoTheNum,
    OutTheNum,
    RetainNum,
    YearRange
  },
  data () {
    return {
      // 查询参数
      queryParams: {
        ids: [], // 统计区
        granularity: 'daily', // 日期
        date: [],
        startTime: '', // 开始日期
        endTime: '', // 结束日期
      },
      // 统计组数据
      countGroupGroupsPage: [],
      checkList: ['进客量'],
      echartsType: 'bar', // 图表展示类型
      // X轴数据
      echartsX: [],
      // 进客量Y轴数据
      echartsY1: [],
      // 出客量Y轴数据
      echartsY2: [],
      // 保有量Y轴数据
      echartsY3: []
    }
  },
  computed: {
    // 计算当前数组是否包含需要展示的图表
    isShow () {
      return (name) => this.checkList.includes(name);
    }
  },
  created() {
    this.getCountGroupGroupsPage(); // 查询客流统计组
    // 处理时间
    this.queryParams.date = [this.$dayjs().subtract(6, 'day').startOf('day').format(), this.$dayjs().format()];
    this.queryParams.startTime = this.$dayjs().subtract(6, 'day').startOf('day').format(); // 获取7天前日期
    this.queryParams.endTime = this.$dayjs().format();
  },
  methods: {
    /**
     * 时间：2024/11/26
     * 作者：刘岩
     * 功能：查询客流统计组
     */
    getCountGroupGroupsPage() {
      countGroupGroupsPage({
        pageNo: 1,
        pageSize: 999,
        groupType: 1
      }).then(res => {
        // 转换数据
        this.countGroupGroupsPage = JSON.parse(res.msg).data.list;
        console.log(JSON.parse(res.msg))
        this.queryParams.ids.push(this.countGroupGroupsPage[0].groupId);
        this.getList(JSON.parse(JSON.stringify(this.queryParams))); // 查询图表数据
      });
    },
    /**
     * 时间：2024/11/20
     * 作者：刘岩
     * 功能：查询条件切换
     */
    typeToggle(type) {
      this.queryParams.granularity = type;
      // 不是 日 daily，并判断是否有保有量，如果有则取消保有量勾选
      if (type !== 'daily' && this.checkList.indexOf('保有量') !== -1) {
        const checkList = this.checkList.filter(item => item !== '保有量');
        this.checkList = [];
        this.$nextTick(() => {
          this.checkList = checkList;
        });
      }
      // 处理查询数据
      let form = JSON.parse(JSON.stringify(this.queryParams));
      switch (type) {
        // 日
        case 'daily':
          this.queryParams.date = [this.$dayjs().subtract(6, 'day').startOf('day').format(), this.$dayjs().format()];
          form.startTime = this.$dayjs().subtract(6, 'day').startOf('day').format(); // 开始日期
          form.endDate = this.$dayjs().format(); // 结束日期
          break;
        // 月
        case 'monthly':
          this.queryParams.date = [
            this.$dayjs().subtract(6, 'month').startOf('month').format(),
            this.$dayjs().subtract(0, 'month').endOf('month').format()
          ];
          form.startTime = this.$dayjs().subtract(6, 'month').startOf('month').format();
          form.endTime = this.$dayjs().subtract(0, 'month').endOf('month').format();
          break;
        // 年
        case 'yearly':
          this.queryParams.date = [
            this.$dayjs().subtract(6, 'year').startOf('year').format(),
            this.$dayjs().subtract(0, 'year').endOf('year').format()
          ];
          form.startTime = this.$dayjs().subtract(6, 'year').startOf('year').format();
          form.endTime = this.$dayjs().subtract(0, 'year').endOf('year').format();
          break;
      }
      this.getList(form);
    },
    handleYearChanged(val) {
      this.queryParams.date = val;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      let form = JSON.parse(JSON.stringify(this.queryParams));
      // 处理查询数据
      switch (this.queryParams.granularity) {
        // 日
        case 'daily':
          form.startTime = this.$dayjs(this.queryParams.date[0]).format();
          form.endDate = this.$dayjs(this.queryParams.date[1]).format();
          break;
        // 月
        case 'monthly':
          form.startTime = this.$dayjs(this.queryParams.date[0]).startOf('month').format();
          form.endTime = this.$dayjs(this.queryParams.date[1]).endOf('month').format();
          break;
        // 年
        case 'yearly':
          form.startTime = this.$dayjs(this.queryParams.date[0]).startOf('year').format();
          form.endTime = this.$dayjs(this.queryParams.date[1]).endOf('year').format();
          break;
      }
      this.getList(form);
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.date = [this.$dayjs().subtract(6, 'day').startOf('day').format(), this.$dayjs().format()];
      this.queryParams.granularity = 'daily';
      this.handleQuery();
    },
    /**
     * 时间：2024/11/26
     * 作者：刘岩
     * 功能：查询图表数据
     */
    getList(form) {
      form.ids = form.ids.join(',');
      passengerFlowGroups(form).then(res => {
        let resp = JSON.parse(res.msg);
        if (resp.msg === 'success') {
          let data = resp.data.list;
          let xData = []; // X轴数据
          let yData1 = []; // 进客量
          let yData2 = []; // 出客量
          let yData3 = []; // 保有量
          data.forEach(item => {
            let time = '';
            // 处理时间格式
            switch (this.queryParams.granularity) {
              // 日
              case 'daily':
                time = this.$dayjs(item.statTime).format('YYYY-MM-DD');
                break;
              // 月
              case 'monthly':
                time = this.$dayjs(item.statTime).format('YYYY-MM');
                break;
              // 年
              case 'yearly':
                time = this.$dayjs(item.statTime).format('YYYY');
                break;
            }
            xData.push(time);
            yData1.push(item.noRepeatInNum);
            yData2.push(item.noRepeatOutNum);
            yData3.push(item.netValue);
          });
          this.echartsX = xData;
          this.echartsY1 = yData1;
          this.echartsY2 = yData2;
          this.echartsY3 = yData3;
        } else {
          this.$message.warning(resp.msg);
        }
      });
    },
    /**
     * 时间：2024/11/20
     * 作者：刘岩
     * 功能：导出选项
     */
    handleCommand(command) {
      this.$message('click on item ' + command);
      console.log(command);
      // 根据勾选的条件渲染图表
    },
    /**
     * 时间：2024/11/20
     * 作者：刘岩
     * 功能：保有量，进客量，出客量勾选
     */
    handleCheckedCitiesChange(value) {
      this.checkList = [];
      this.$nextTick(() => {
        this.checkList = value;
      });
    },
    /**
     * 时间：2024/11/21
     * 作者：刘岩
     * 功能：切换图表展示类型
     */
    echartsTypeToggle(type) {
      this.echartsType = type;
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 84px);
  ::v-deep.el-form {
    .btn {
      display: inline-block;
      width: 60px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      cursor: pointer;
      font-size: 14px;
      border: 1px solid #e5e5e5;
      margin-bottom: 10px;
      &:nth-child(1n) {
        border-right: none;
      }
    }
    .last-btn {
      border-right: 1px solid #e5e5e5 !important;
      margin-right: 10px;
    }
    .btn-active {
      border: 1px solid #00afff !important;
    }
  }
  .header {
    font-size: 14px;
    color: #606266;
    display: flex;
    justify-content: space-between;
    .left {
      & > span {
        padding-right: 15px;
        border-right: 2px solid #e5e5e5;
        display: inline-block;
        cursor: pointer;
      }
      .el-dropdown {
        margin-left: 15px;
        cursor: pointer;
      }
    }
    .right {
      display: flex;
      align-items: center;
      .el-checkbox{
        margin-right: 20px;
      }
      .toggle-img {
        width: 22px;
        margin-right: 20px;
        cursor: pointer;
      }
    }
  }
  .container {
    flex: 1;
    display: flex;
    flex-direction: column;
    .box {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
  }
  .container2 {
    flex: 1;
    display: flex;
    justify-content: space-between;
    .box {
      flex: 1;
      display: flex;
      flex-direction: column;
      .container-header {
        padding: 15px 0;
        text-align: center;
        display: flex;
        justify-content: center;
        color: #606266;
        font-size: 14px;
        .num {
          display: inline-block;
          color: #000000;
          font-weight: bold;
          font-size: 20px;
        }
      }
      .echarts-box {
        flex: 1;
      }
    }
  }
  .container3 {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    .box3 {
      width: 100% !important;
    }
    .box {
      width: 50%;
      height: 50%;
      display: flex;
      flex-direction: column;
      .container-header {
        padding: 15px 0;
        text-align: center;
        display: flex;
        justify-content: center;
        color: #606266;
        font-size: 14px;
        .num {
          display: inline-block;
          color: #000000;
          font-weight: bold;
          font-size: 20px;
        }
      }
      .echarts-box {
        flex: 1;
      }
    }
  }
}
</style>
